<template>
  <div>
    <el-menu default-active="1" background-color="#304156" text-color="#fff" active-text-color="#1890ff"
      @open="handleOpen" @close="handleClose" :collapse="isCollapse" :collapse-transition="false">

      <!--侧边栏的logo和文字容器高度要和header布局的高度保持一致-->
      <div style="height: 60px; line-height: 60px; text-align: center">
        <img src="../assets/pro-logo.png" alt="" style="width: 20px; position: relative;
               top: 5px; margin-right: 3px">
        <b style="color: white" v-show="!isCollapse">后台管理系统</b>
      </div>

      <router-link to="/home">
        <el-menu-item index="Home">
          <template>
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </template>
        </el-menu-item>
      </router-link>

      <el-submenu index="System">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>系统管理</span>
        </template>

        <router-link to="/system/users">
          <el-menu-item index="Users" style="background-color: #1f2d3d !important">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>用户管理</span>
            </template>
          </el-menu-item>
        </router-link>

      </el-submenu>

      <router-link to="/home/songs">
        <el-menu-item index="Songs">
          <template>
            <i class="el-icon-link"></i>
            <span slot="title">歌曲管理</span>
          </template>
        </el-menu-item>
      </router-link>

      <router-link to="/home/songsheet">
        <el-menu-item index="songsheet">
          <template>
            <i class="el-icon-s-data"></i>
            <span slot="title">歌单管理</span>
          </template>
        </el-menu-item>
      </router-link>

      <router-link to="/home/singer">
        <el-menu-item index="singer">
          <template>
            <i class="el-icon-mic"></i>
            <span slot="title">歌手管理</span>
          </template>
        </el-menu-item>
      </router-link>

    </el-menu>
  </div>
</template>


<script>
export default {
  props: {
    isCollapse: Boolean
  },
  methods: {
    handleOpen(key, keyPath) { },
    handleClose(key, keyPath) { },
  },
};
</script>

<style scoped>
.el-menu,
.el-menu-item,
.el-submenu {
  border: none;
}

.router-linkrouter-link-active {
  text-decoration: none;
}



.el-menu--collapse {
  text-align: center;
}
</style>